<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Layui Table with lay-options</title>
    <!-- 使用CDN引入资源以便测试，实际项目中替换为你的路径 -->

    <script src="js/jquery.min.js"></script>

    <script src="js/xlsx.full.min.js"></script>
    <!-- <script src="js/xlsx-style.js"></script> -->
    <script src="js/export.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element_index.js"></script>
    <link rel="stylesheet" href="css/element_index.css">
    <script src="js/data.js" type="module"></script>


</head>

<body>
    <div id="accountId">
        <button id="btn" @click="exportFile">导出</button>
        <div id="accountId">
            <el-table id="table1" :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
                <el-table-column label="序号" type="index" width="50" align="center" :fixed=" isFixed ? 'left' : false">
                    <template slot-scope="scope">
                        {{scope.$index / 3 + 1}}
                    </template>
                </el-table-column>
                <el-table-column label="工号" prop="planNo" width="150" align="center" :fixed=" isFixed ? 'left' : false">
                </el-table-column>
                <el-table-column label="规格型号" prop="planType" width="150" align="center"
                    :fixed=" isFixed ? 'left' : false">
                </el-table-column>
                <el-table-column label="产线" prop="productionLine" width="150" align="center"
                    :fixed=" isFixed ? 'left' : false">
                </el-table-column>
                <el-table-column label="项目名称" prop="projectName" width="150" align="center"
                    :fixed=" isFixed ? 'left' : false">
                </el-table-column>
                <el-table-column label="物料情况" prop="materialStatus" width="150" align="center"
                    :fixed=" isFixed ? 'left' : false">
                    <template slot-scope="scope">
                        {{wlText[scope.$index % 3]}}
                    </template>
                </el-table-column>
                <el-table-column label="绕线" align="center">
                    <el-table-column label="铜线" width="120" align="center">
                        <el-table-column label="屏蔽线" prop="屏蔽线" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="电磁线" prop="city" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="饶绝" align="center">
                        <el-table-column label="绕线绝缘" prop="绕线绝缘" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>


                <el-table-column label="线圈组装" align="center">
                    <el-table-column label="光纤" width="120" align="center">
                        <el-table-column label="线圈组装光纤" prop="光纤" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="组绝" align="center">
                        <el-table-column label="组绝绝缘" prop="组绝" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="器身" align="center">
                    <el-table-column label="磁分路大饼" width="120" align="center">
                        <el-table-column label="铁芯兵" prop="成品铁芯" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="磁分路" prop="city" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="器绝" align="center">
                        <el-table-column label="器身器绝" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="引线" align="center">
                    <el-table-column label="均压管A" width="120" align="center">
                        <el-table-column label="均压管" prop="city" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="开关" align="center">
                        <el-table-column label="进口开关" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="国产开关" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="引线机加" width="120" align="center">
                        <el-table-column label="引线机加件" prop="city" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="引绝" width="120" align="center">
                        <el-table-column label="引总绝" prop="city" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="出线装置（均压管、球绝缘）" align="center">
                        <el-table-column label="绝缘均压管" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="均压球" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="出线装置" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>


                <el-table-column label="总装" align="center">
                    <el-table-column label="储油柜/胶囊" prop="province" width="120" align="center">
                        <el-table-column label="胶囊" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="储油柜" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="端子箱A" prop="province" width="120" align="center">
                        <el-table-column label="端子箱" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="密封垫A" prop="province" width="120" align="center">
                        <el-table-column label="密封垫" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="冷却系统" prop="province" width="120" align="center">
                        <el-table-column label="散热器" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="冷却器" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="风机" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="阀门A" prop="province" width="120" align="center">
                        <el-table-column label="进口阀门" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="阀门" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="温控器" prop="province" width="120" align="center">
                        <el-table-column label="国产温控器" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口温控器" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="套管" prop="province" width="120" align="center">
                        <el-table-column label="国产套管" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口套管" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="压力释放阀" prop="province" width="120" align="center">
                        <el-table-column label="国产压力释放阀" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口压力释放阀" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="气体继电器" prop="province" width="120" align="center">
                        <el-table-column label="国产气体继电器" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口气体继电器" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="油箱A" prop="province" width="120" align="center">
                        <el-table-column label="油箱" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="油箱磁屏蔽" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="油位计" prop="province" width="120" align="center">
                        <el-table-column label="进口油位计" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="国产油位计" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="组件柜/控制柜" prop="province" width="120" align="center">
                        <el-table-column label="三项智汇控柜" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="智能组件柜" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="风冷控制柜" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="在线监测A" prop="province" width="120" align="center">
                        <el-table-column label="在线监测" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="速动A" prop="province" width="120" align="center">
                        <el-table-column label="速动" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口速动" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="吸湿器" prop="province" width="120" align="center">
                        <el-table-column label="吸湿器" prop="province" width="120" align="center">
                        </el-table-column>
                        <el-table-column label="进口吸湿器" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="互感器A" prop="province" width="120" align="center">
                        <el-table-column label="互感器" prop="province" width="120" align="center">
                        </el-table-column>
                    </el-table-column>

                </el-table-column>

            </el-table>
        </div>

    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el: '#accountId',
            data() {
                return {
                    tableData: [
                        {
                            "materialStatus": "到厂",
                            "光纤": '光纤',
                            "planType": "ODFPS-500000/750",
                            "planNo": "2025020079",
                            "电磁线": null,
                            "productionLine": "2",
                            "绕线绝缘": null,
                            "组绝": null,
                            "planId": "1955545473706811393",
                            "屏蔽线": null,
                            "成品铁芯": null,
                            "projectName": "宁夏烽燧750kV"
                        },
                        {

                        },
                        {

                        },
                        {

                        },
                        {

                        },
                        {

                        },

                    ],
                    wlText: [
                        '到厂（实际到场）',
                        '供应商（承诺时间）',
                        '需求（采购员）',
                    ],
                    isFixed: true,
                }
            },
            mounted() {
                // this.getList()
            },
            methods: {
                exportFile() {
                    this.isFixed = false

                    this.$nextTick(() => {
                        var table1 = document.querySelector("#table1");
                        var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象

                        console.log(sheet, 'sheet')
                        console.log(sheet['!merges'], 'merges')
                        // 定义边框样式
                        const border = {
                            top: { style: "thin", color:   "#000000"  },
                            bottom: { style: "thin", color:   "#000000"  },
                            left: { style: "thin", color:   "#000000"  },
                            right: { style: "thin", color:   "#000000"  }
                        };

                        // 遍历工作表中的所有单元格并添加边框
                        for (const cell in sheet) {
                            if (sheet.hasOwnProperty(cell) && cell.charAt(0) !== '!') {
                                sheet[cell].s = { border };
                            }
                        }

                        for (let i = 0; i < sheet['!merges'].length; i++) {
                            sheet['!cols'].push({ wpx: 150 });
                            sheet['!rows'].push({ wpx: 38 });
                        }

                        setTimeout(() => {
                            openDownloadDialog(sheet2blob(sheet), '下载.xlsx');
                        }, 100);
                    })
                },
                getList() {
                    let that = this
                    $.ajax({
                        type: "POST",
                        url: prefix + "/purchaseList",
                        dataType: "json",
                        success: function (result) {
                            that.tableData = result.data || []
                        }
                    });
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex < 5) {
                        if (rowIndex % 3 === 0) {
                            return {
                                rowspan: 3,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                }
            }
        });



    </script>
</body>

</html>